import React, { PureComponent } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import screen from '../../../../common/screen'
type Props = {
    info: Object,
}
type State = {
}
class GoodsDetilGroupPurchaseList extends PureComponent<Props, State>{
    render() {
        let { info } = this.props
        return (
            <View style={styles.container}>
                <View style={styles.left}>
                    <Image source={require('../../../../img/mine/icon_mine_friends.png')} style={styles.headImg} />
                    <View style={styles.header}>
                        <Text style={{fontSize: 18,color:'black'}}>{info.title}</Text>
                    </View>
                </View>
                <View flex={1} />
                <View style={styles.right}>
                    <View style={{justifyContent: 'center', alignItems: 'center', marginRight: 10 }}>
                        <View style={{ flexDirection: 'row', }}>
                            <Text style={styles.fixedfont}>还差</Text><Text style={{ color: 'red' }}>{info.successcount}</Text><Text style={styles.fixedfont}>人拼成</Text>
                        </View>
                        <Text style={{}}>剩余{info.price}</Text>
                    </View>
                    <TouchableOpacity style={styles.TouchableOpacity}>
                        <Text style={{color:'white'}}>去拼单</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        marginTop: 5,
        flexDirection: 'row',
        width: screen.width,
        height: 80,
        borderTopWidth: 1,    //上边框宽度
        borderColor: '#F5F5F5',
        justifyContent: 'center',
        alignItems: 'center',

    },
    left: {
        flexDirection: 'row',
    },
    headImg: {
        marginLeft:screen.width / 40,
    },
    header:{
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: screen / 40,
    },
    right: {
        flexDirection: 'row',
    },
    fixedfont:{
        color:'black',
    },
    TouchableOpacity: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
        marginRight: 10,
        width: 60,
        height: 30,
        borderRadius: 5,
    }
})
export default GoodsDetilGroupPurchaseList